import React, { Component } from 'react';
import { Text, View, PanResponder, Animated } from 'react-native';
import PropTypes from 'prop-types';
import { noop } from 'bee/utils';
import { Tab } from './Tab';

class Tabs extends Component {
  static propTypes = {
    tabNames: PropTypes.arrayOf(PropTypes.string).isRequired, // 选项名称数组
    children: PropTypes.arrayOf(PropTypes.element).isRequired,
    containerStyle: View.propTypes.style,
    selectedTabStyle: View.propTypes.style,
    selectedTextStyle: Text.propTypes.style,
    defaultTabStyle: View.propTypes.style,
    defaultTextStyle: Text.propTypes.style,
    onChangeTab: PropTypes.func,
    activeIndex: PropTypes.number,
    swipeShield: PropTypes.number,
  };

  static defaultProps = {
    containerStyle: {}, // 包裹容器样式
    selectedTextStyle: {}, // 选中tab 的字体样式
    selectedTabStyle: {}, // 选中的tab 样式
    defaultTabStyle: {},
    defaultTextStyle: {},
    onChangeTab: noop, // 切换Tab时调用的函数
    activeIndex: 0, // 默认激活的tab索引
    swipeShield: 100, // 滑动的阈值
  };

  constructor(props) {
    super(props);

    this.state = {
      activeIndex: this.validatedActiveIndex(this.props.activeIndex),
      pan: new Animated.ValueXY(),
    };

    this.startSwipe = 0;
    this.endSwipe = 0;

    this.panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: Animated.event([
        null,
        {
          dx: this.state.pan.x, // x,y are Animated.Value
          // dx: 100, // x,y are Animated.Value
          // dy: this.state.pan.y,
        },
      ]),
      onPanResponderGrant: (e, gestureState) => {
        this.startSwipe = gestureState.x0;
      },

      onPanResponderRelease: (e, gestureState) => {
        this.endSwipe = gestureState.x0;
        const activeIndex = this.getSwipedPageIndex(
          this.state.activeIndex,
          gestureState.dx
        );

        Animated.spring(
          this.state.pan, // Auto-multiplexed
          { toValue: { x: 0, y: 0 } }
        ).start();
        this.select(activeIndex);
      },
    });

    this.select = this.select.bind(this);
  }

  getSwipedPageIndex(prevIndex, dx) {
    if (Math.abs(dx) < this.props.swipeShield) {
      return prevIndex;
    }
    return dx > 0 ? prevIndex - 1 : prevIndex + 1;
  }

  validatedActiveIndex(index) {
    const { length } = this.props.tabNames;
    return index < 0 ? 0 : index >= length ? length - 1 : index;
  }

  select(index) {
    this.setState({
      activeIndex: this.validatedActiveIndex(index),
    });
  }

  render() {
    const {
      tabNames,
      selectedTabStyle,
      selectedTextStyle,
      defaultTabStyle,
      defaultTextStyle,
      children,
      containerStyle,
    } = this.props;

    return (
      <View>
        <View
          style={[
            {
              flexDirection: 'row',
              justifyContent: 'space-around',
            },
            containerStyle,
          ]}
        >
          {tabNames.map((text, index) => (
            <Tab
              key={text}
              text={text}
              selectedTabStyle={selectedTabStyle}
              selectedTextStyle={selectedTextStyle}
              defaultTextStyle={defaultTextStyle}
              defaultTabStyle={defaultTabStyle}
              isActive={this.state.activeIndex === index}
              event={() => this.select(index)}
            />
          ))}
        </View>
        {/* <Animated.View
          // style={{ flex: 1, transform: [{ translateX }] }}
          {...this.panResponder.panHandlers}
          style={[this.state.pan.getLayout()]}
        > */}
        {children[this.state.activeIndex]}
        {/* </Animated.View> */}
      </View>
    );
  }
}

export default Tabs;
